<template>
  <div class="search-body">
    <div class="search-1">
      <div>
        <span class="title" style="width: 49px;height: 30px;">专题：</span>
      </div>
      <div>
        <span @click="subjectId = ''" :class="{ 'active': subjectId == '' }">全部专题</span>
        <span v-for="item in subjectList" :key="item.subjectId" :class="{ 'active': subjectId == item.subjectId }"
          @click="subjectId = item.subjectId">
          {{ item.subjectTitle }}
        </span>
      </div>
    </div>
    <div class="search-2">
      <div>
        <span class="title" style="width: 49px;height: 30px;">类型：</span>
      </div>
      <div>
        <span @click="type = ''" :class="{ 'active': type == '' }">全部类型</span>
        <span @click="type = 'free'" :class="{ 'active': type == 'free' }">免费课程</span>
        <span @click="type = 'pay'" :class="{ 'active': type == 'pay' }">付费课程</span>
        <span @click="type = 'boutique'" :class="{ 'active': type == 'boutique' }">精品课程</span>
        <span @click="type = 'discount'" :class="{ 'active': type == 'discount' }">限时折扣课程</span>
      </div>
    </div>
    <div class="search-3">
      <div>
        <span class="title" style="width: 49px;height: 30px;">方式：</span>
      </div>
      <div>
        <span @click="courseType = ''" :class="{ 'active': courseType == '' }">全部方式</span>
        <span @click="courseType = 'live'" :class="{ 'active': courseType == 'live' }">直播课程</span>
        <span @click="courseType = 'recorded'" :class="{ 'active': courseType == 'recorded' }">录播课程</span>
      </div>
    </div>
    <div class="search-section" v-if="searchResultList.length > 0">
      <div class="col" v-for="item in searchResultList" :key="item.courseId" @click="goToCourseDetail(item.courseId)">
        <div class="course-cover">
          <div class="img-box">
            <img :src="item.coverFileUrl" alt="">
          </div>
        </div>
        <div class="course-cover-1">
          <div class="classList-introduce">{{ item.courseTitle }} </div>
          <div class="classList-person">
            共{{ item.subSectionNum }}节课|{{ item.learningNum }}人报名
          </div>
          <div class="classList-price">
            <span class="price-span" v-if="item.isFree == 1"> 免费 </span>
            <span class="old-price" v-else-if="item.isDiscount == 1 && item.isFree == 0">￥{{ item.discountPrice }} <del>
                ￥{{ item.coursePrice }} </del> </span>
            <span class="discount-desc ant-tag ant-tag-orange" v-else> ￥{{ item.coursePrice }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="kong">
        <a-empty />
      </div>
    <div class="pagination">
      <a-pagination v-model="current" :total="50" show-less-items />
    </div>
  </div>
</template>
<script>
import { getSubjectBody, getSubjectlist } from '@/api/request';

export default {
  name: "searchBody",
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchResultList: [], // 搜索结果列表
      subjectList: [], // 专题列表
      subjectId: '', // 专题ID
      type: '', // 课程类型
      courseType: '', // 课程方式
      pageSize: 15, // 每页显示的数量,
      pageNum: 1, // 当前页码
      // keyword: '', // 搜索关键字
      current: 1,// 当前页码
    };
  },
  methods: {
    goToCourseDetail(courseId) {
      this.$router.push({
        path: '/detail',
        query: {
          courseId: courseId
        }
      })
    },
    reFlashSearchResult() {
      getSubjectBody(this.pageNum, this.pageSize, this.type, this.subjectId, this.keyword, this.courseType).then(res => {
        this.searchResultList = res.courseList;
        // console.log('接口返回的数据:', res);
      }).catch(err => {
        console.log(err);
      });
    },
  },
  watch: {
    pageNum: {
      handler() {
        this.reFlashSearchResult()
      }
    },
    pageSize: {
      handler() {
        this.reFlashSearchResult()
      }
    },
    type: {
      handler() {

        this.reFlashSearchResult()
      }
    },
    subjectId: {
      handler() {

        this.reFlashSearchResult()
      }
    },
    courseType: {
      handler() {
        this.reFlashSearchResult()
      }
    },
    keyword: {
      handler() {
        console.log('keyword 123');
        if (this.$route.path === '/search')
          this.$router.push({ path: '/search', query: { keyword: this.keyword } })
        this.reFlashSearchResult()
      }
      // handler() {
      //   this.reFlashSearchResult();
      // },
      // immediate: true
    },
    current: {
      handler(current) {
        this.current = current;
        this.pageNum = current;
      },
      immediate: true
    }
  },
  created() {
    getSubjectBody(this.pageNum, this.pageSize, this.type, this.subjectId, this.keyword, this.courseType).then(res => {
      this.searchResultList = res.courseList;
      console.log('接口返回的数据:1111111111', res);
    }).catch(err => {
      console.log(err);
    });
    getSubjectlist({ enable: 1 }).then(result => {
      this.subjectList = result.rows;
      console.log('subjectId', result);
    }).catch(err => {
      console.log(err);
    });
    this.reFlashSearchResult();
    this.subjectId = this.$route.query.subjectId || '';
    // if(this.$route.query.keyword){
    //   this.keyword = this.$route.query.keyword;
    // }
    // this.keyword = this.$route.query.keyword || '';
    // console.log('keyword', this.$route.query.keyword, this.keyword);
    this.courseType = this.$route.query.courseType || '';
    this.type = this.$route.query.type || '';
  },
};
</script>

<style scoped lang="scss">
.search-1,
.search-2,
.search-3 {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  font-size: 16px;

  span {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    border-radius: 5px;
  }
}

.active {
  color: #fff;
  background-color: rgb(0, 207, 140);
  height: 35px;
  line-height: 35px;
}

.search-section {
  margin-top: 10px;
  background-color: #f5f5f5;
  width: 1200px;
  display: flex;
  flex-wrap: wrap;


  .col {
    width: 215px !important;
    background: #fff;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);
    border-radius: 10px;
    // float: left;
    margin: 14px .5% 0;
    box-sizing: border-box;
    flex: 0 0 auto;


    .course-cover {
      height: auto;
      margin-bottom: 6px;

      .img-box {
        width: 100%;
        padding-top: 55%;
        position: relative;
        border-radius: 10px 10px 0 0;
        overflow: hidden;

        img {
          position: absolute;
          width: 100%;
          top: 0;
          left: 0;
          height: 100%;
          transition: all .6s ease;
        }
      }
    }

    .course-cover-1 {
      padding: 0px 8px;

      .classList-introduce {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        // 假设行高为 20px，两行就是 40px
        max-height: 20px;
        line-height: 20px;
        margin-bottom: 6px;
      }

      .classList-person {
        color: #b7bbc4;
        height: 22px;
      }

      .red {
        color: red;
      }
    }
  }
}

.pagination {
  // width: 1200px;
  // height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  // text-align: center;
  // margin: 0 auto;
  display: flex;
  justify-content: center;
}
</style>